<script setup>
import { ref, onMounted, watch } from 'vue';
import { CloseBold } from '@element-plus/icons-vue';
import { ElSelect, ElOption, ElMessage, ElIcon } from 'element-plus';
import _ from 'lodash-es';
import mapboxgl from 'mapbox-gl';
import { storeToRefs } from 'pinia';
import { load } from '@/common/common-loading.js';
import { useMapStore } from '@/stores';
import { GET_MAPBOX_MAP, REMOVE_LAYER, REST_MAP_FIT_BOUNDS } from './common/common-map-fun';
import { layerGroupId } from './common/common-map-info';

const storeMap = useMapStore();
const { attributeList, resultCheckedStateQuery } = storeToRefs(storeMap);

const emit = defineEmits(['handleCloseQuery', 'handleQueryInfo']);

const checked_layer = ref('1');
const layerOptions = ref([]);
const attResult = ref(null);

let flag = false;
let marker;

watch(
  resultCheckedStateQuery,
  (val) => {
    if (val !== 'attribute') {
      REST_MAP_FIT_BOUNDS();
    }
  },
  { deep: true, immediate: true },
);

watch(
  attributeList,
  (val) => {
    if (val.length) {
      layerOptions.value = val;

      const bool = val.some((item) => item.layerName == checked_layer.value);

      if (!bool) {
        checked_layer.value = '1';
      }
    } else {
      checked_layer.value = '1';
      layerOptions.value = [];
    }
  },
  { deep: true },
);

onMounted(() => {
  layerOptions.value = attributeList.value;
});

const handleChangeOption = (e) => {
  checked_layer.value = e;

  if (checked_layer.value !== '1') {
    handlePointQuery();
  }
};

// *空间点查询
const handlePointQuery = () => {
  const map = GET_MAPBOX_MAP();

  map.getCanvas().style.cursor = 'crosshair';
  map.off('click', mapCallBackPoint);

  map.on('click', mapCallBackPoint);
  storeMap.SET_FUNCTION_MAP(mapCallBackPoint);
};

const mapCallBackPoint = async (e) => {
  if (flag) {
    return;
  }

  const layerInfo = _.keyBy(attributeList.value, 'layerName')[checked_layer.value];

  if (!layerInfo) {
    ElMessage({
      message: '请选择图层',
      duration: 1000,
      type: 'warning',
    });

    return;
  }

  flag = true;

  if (attResult.value?.length) {
    clearLightLayer();
  }

  const map = GET_MAPBOX_MAP();

  if (!layerInfo._noWFS) {
    const features = map.queryRenderedFeatures(e.point);

    if (features.length) {
      if (marker) {
        marker.remove();
      }

      const layer = features[0].properties;
      const el = document.createElement('div');

      el.style = 'display:flex;';

      let simple = `<div class="manageToolIcon" ><div class="s1"></div><div class="s2" style="border: 3px solid #c2231a"></div><div class="s4" style="border: 3px solid #c2231a"></div><div class="s4 w1" style="border: 3px solid #c2231a"></div> <div class="s4 w2" style="border: 3px solid #c2231a"></div><div class="s4 w3" style="border: 3px solid #c2231a"></div> <div class="s4 w4" style="border: 3px solid #c2231a"></div> <div class="s4 w5" style="border: 3px solid #c2231a"></div></div></div>`;

      el.innerHTML = simple;
      marker = new mapboxgl.Marker(el).setLngLat([layer.longitude, layer.latitude]).addTo(map);

      emit('handleQueryInfo', layer, checked_layer, '属性查询', 1);
    } else {
      ElMessage({
        message: '未查询到任何要素',
        duration: 1000,
        type: 'info',
      });

      emit('handleQueryInfo', {}, checked_layer, '属性查询', 1);
    }
  } else flag = false;
  load.hide();
};

// 关闭窗口
const handleCloseQuery = () => {
  emit('handleCloseQuery');

  handleClearResult();
  REST_MAP_FIT_BOUNDS();
  checked_layer.value = '1';
  layerOptions.value = [];

  if (marker) {
    marker.remove();
  }
};

// *清除
const handleClearResult = () => {
  const map = GET_MAPBOX_MAP();

  map.off('click', mapCallBackPoint);
  map.getCanvas().style.cursor = 'pointer';

  if (attResult.value?.length) {
    clearLightLayer();
  }
};

// 清除高亮图层
const clearLightLayer = () => {
  const layerId = layerGroupId.High_Light_RESULT_LAYER;

  for (let i = 0; i < attResult.value?.length; i++) {
    REMOVE_LAYER(`${layerId}~light${i}`);
  }
};
</script>
<template>
  <div class="map_attribute_root">
    <header>
      <div class="title">
        <p>选择图层</p>
        <ElSelect v-model="checked_layer" placeholder="请选择图层" class="m-2" @change="(e) => handleChangeOption(e)">
          <ElOption value="1" label="请选择图层">请选择可视图层</ElOption>
          <ElOption v-for="item in layerOptions" :key="item.key" :label="item.mapDirectory" :value="item.layerName" />
        </ElSelect>
      </div>
      <ElIcon class="root_icon_close" @click="handleCloseQuery">
        <CloseBold />
      </ElIcon>
    </header>
  </div>
</template>

<style scoped lang="scss">
.map_attribute_root {
  position: absolute;
  top: 80px;
  right: 33px;
  z-index: 99;
  width: 336px;
  min-height: 47px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 6px;
  box-shadow: 0px 0px 0.9px rgba(0, 0, 0, 0.02), 0px 0px 2.1px rgba(0, 0, 0, 0.028), 0px 0px 3.9px rgba(0, 0, 0, 0.035),
    0px 0px 6.9px rgba(0, 0, 0, 0.042), 0px 0px 13px rgba(0, 0, 0, 0.05), 0px 0px 31px rgba(0, 0, 0, 0.07);

  header {
    display: flex;
    justify-content: space-between;
    height: 27px;
    padding: 12px 6px 0 8px;
    border-radius: 6px;
    .title {
      display: flex;
      align-items: center;
      color: #565656;
      font-weight: 600;
      font-size: 16px;
      letter-spacing: 1px;
      p {
        margin-right: 5px;
        white-space: nowrap;
      }
    }
    .root_icon_close {
      position: relative;
      top: -12px;
      width: 14px;
      color: #b5b5b5;
      font-size: 16px;
      cursor: pointer;
      :hover {
        color: #61ba37;
      }
    }
  }

  :deep(.el-input__wrapper) {
    background-color: rgb(255 255 255 / 37%);
  }
}
</style>
